<template>
<transition name="slide">
  <div class="addsong" v-show="showflag" @click.stop>
      <div class="header">
          <h1 class="title">添加歌曲列表</h1>
          <div class="close" @click="hide">
              <i class="icon-close">X</i>
          </div>
      </div>
      <div class="searchbox-wrapper">
          <searchbox placeholder = "搜索歌曲" @querry = "onQuerryChange" ref="searchbox"></searchbox>
      </div>
      <div class="short-cut" v-show="!querry">
          <switches @switch = "switchitem" :switches = "switches" :currentIndex = "currentIndex"></switches>
          <div class="list-wrapper">
              <scroll class="list-scroll" v-if="currentIndex===0" :data = "playHistory" ref="listscroll"> 
                  <div class="list-inner">
                        <songlist :songlist = "playHistory" @selectItem = "selectSong"></songlist>
                  </div>
              </scroll>
              <scroll :refreshDelay = "refreshDelay" class="list-scroll" v-if="currentIndex===1" :data = "searchHistory" ref="searchList"> 
                 <div class="list-inner">
                     <searchlist 
                        :searches = "searchHistory" 
                        @delete = "deleteOne"
                        @select = "setquerry"></searchlist>
                 </div>
              </scroll>
          </div>
      </div>
      <div class="search-result" v-show="querry">
          <suggest  :querry = "querry" ref="suggest" :showSinger = "showSinger" @listScroll = "listScroll" @search = "selectSuggest"></suggest>
      </div>
      <toptip ref="topTip">
        <div class="tip-title">
          <i class="icon-ok"></i>
          <span class="text">1首歌曲已经添加到播放列表</span>
        </div>
      </toptip>
  </div>
</transition>
</template>

<script>
import searchbox from "base/searchbox/searchbox.vue"
import suggest from "components/suggest/suggest.vue"
import switches from "base/switches/switches.vue"
import {searchMixin} from "commom/js/mixin.js"
import scroll from "base/scroll/scroll.vue"
import {mapGetters,mapActions} from 'vuex';
import songlist from "base/songlist/songlist.vue"
import Song from "commom/js/song.js"
import searchlist from "base/searchlist/searchlist.vue"
import toptip from "base/toptip/toptip.vue"
export default {
    mixins:[searchMixin],
    data(){
        return{
            showflag:false,
            showSinger:false,
            switches:[
                {name:"最近播放"},
                {name:"搜索历史"}
            ],
            currentIndex:0,
        }
    },
    computed:{
        ...mapGetters([
            'playHistory'
        ])
    },
    methods:{
        show(){
            this.showflag = true
            this.refreshList()
        },
        hide(){
            this.showflag = false
        },
        selectSuggest(){
            this.showtip()
            this.saveSearch()
        },
        blurinput(){
            this.listScroll()
        },
        switchitem(index){
            this.currentIndex = index
            console.log(index)
        },
        refreshList(){
            setTimeout(()=>{
                if (this.currentIndex === 0){
                    this.$refs.listscroll.refresh()
                }else if(this.currentIndex === 1){
                    this.$refs.searchList.refresh()
                }
            },20)
        },
        selectSong({item,index}){
            if(index!=0){
               this.insertSong(new Song(item))
               this.showtip()
            }
            
        },
        showtip(){
            this.$refs.topTip.show();
        },
        ...mapActions([
            'insertSong'
        ])
    },
    components:{
        searchbox,
        suggest,
        switches,
        scroll,
        songlist,
        searchlist,
        toptip
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.addsong
    position fixed
    top 0
    bottom 0
    width 100%
    background-color $color-background
    &.slide-enter-active,&.slide-leave-active
        transition all 0.3s
    &.slide-enter,&.slide-leave-to
        transform translate3d(100%,0,0)
    .header 
        position relative
        height 44px
        text-align center
        .title
            line-height 44px
            font-size $font-size-large
            color $color-text
        .close
            position absolute    
            right 8px
            top 0
            .icon-close
                display: block;
                padding: 12px;
                font-size: 20px;
                color: $color-theme
    .searchbox-wrapper
        margin 20px
    .short-cut
        .list-wrapper
            position: absolute
            top: 165px
            bottom: 0
            width: 100%
            .list-scroll
                height: 100%
                overflow: hidden
                .list-inner
                    padding: 20px 30px    
    .search-result
       position fixed
       top 124px
       bottom 0
       overflow hidden
       width 100%
    .tip-title
      text-align: center
      padding: 18px 0
      font-size: 0
      .icon-ok
        font-size: $font-size-medium
        color: $color-theme
        margin-right: 4px
      .text
        font-size: $font-size-medium
        color: $color-text
</style>